<template>
	<cl-drawer
		ref="drawer"
		:props="{
			title: '日跟踪',
			size: '65%'
		}"
		:show-close="false"
		@close="onClose"
	>
		<el-form label-position="top">
			<el-form-item label="总目标">
				<el-card shadow="never">
					<el-row :gutter="20">
						<el-col :span="4">
							<cl-filter label="月份：">{{ trackGeneral.date }}</cl-filter>
						</el-col>
						<el-col :span="4">
							<cl-filter label="事业部：">{{ trackGeneral.biz_name }}</cl-filter>
						</el-col>
						<el-col :span="4">
							<cl-filter label="分公司：">{{ trackGeneral.company_name }}</cl-filter>
						</el-col>
						<el-col :span="4">
							<cl-filter label="部门：">{{ trackGeneral.dept_name }}</cl-filter>
						</el-col>
						<el-col :span="4">
							<cl-filter label="品牌：">{{ trackGeneral.bra_name }}</cl-filter>
						</el-col>
						<el-col :span="4">
							<cl-filter label="加微数(日)：">
								{{ trackGeneral.day_wechat }}
							</cl-filter>
						</el-col>
						<el-col :span="4">
							<cl-filter label="新客定金数(日)：">
								{{ trackGeneral.day_deposit }}
							</cl-filter>
						</el-col>
					</el-row>
					<el-row :gutter="20">
						<el-col :span="4">
							<cl-filter label="加微数(月)：">
								<span class="color-danger">
									{{ trackGeneral.month_wechat }}
								</span>
							</cl-filter>
						</el-col>
						<el-col :span="4">
							<cl-filter label="累计：">
								<span class="color-primary">
									{{ trackGeneral.month_wechat_cumulative }}
								</span>
							</cl-filter>
						</el-col>
						<el-col :span="4">
							<cl-filter label="差额：">
								<span class="color-danger">
									{{ trackGeneral.month_wechat_difference }}
								</span>
							</cl-filter>
						</el-col>
						<el-col :span="4">
							<cl-filter label="完成度：">
								<span class="color-primary">
									{{ trackGeneral.month_wechat_completion }}
								</span>
							</cl-filter>
						</el-col>
					</el-row>
					<el-row :gutter="20">
						<el-col :span="4">
							<cl-filter label="新客定金数(月)：">
								<span class="color-danger">
									{{ trackGeneral.month_deposit }}
								</span>
							</cl-filter>
						</el-col>
						<el-col :span="4">
							<cl-filter label="累计：">
								<span class="color-primary">
									{{ trackGeneral.month_deposit_cumulative }}
								</span>
							</cl-filter>
						</el-col>
						<el-col :span="4">
							<cl-filter label="差额：">
								<span class="color-danger">
									{{ trackGeneral.month_deposit_difference }}
								</span>
							</cl-filter>
						</el-col>
						<el-col :span="4">
							<cl-filter label="完成度：">
								<span class="color-primary">
									{{ trackGeneral.month_deposit_completion }}
								</span>
							</cl-filter>
						</el-col>
					</el-row>
				</el-card>
			</el-form-item>
			<el-form-item label="个人目标">
				<el-card shadow="never">
					<temolate v-if="trackGeneral.prerson_plan_has">
						<el-row :gutter="20">
							<el-col :span="4">
								<cl-filter label="加微数(日)：">
									<span class="color-danger">
										{{ trackPersonal.day_wechat }}
									</span>
								</cl-filter>
							</el-col>
							<el-col :span="4">
								<cl-filter label="新客定金数(日)：">
									<span class="color-danger">
										{{ trackPersonal.day_deposit }}
									</span>
								</cl-filter>
							</el-col>
						</el-row>
						<el-row :gutter="20">
							<el-col :span="4">
								<cl-filter label="加微数(月)：">
									<span class="color-danger">
										{{ trackPersonal.month_wechat }}
									</span>
								</cl-filter>
							</el-col>
							<el-col :span="4">
								<cl-filter label="累计：">
									<span class="color-primary">
										{{ trackPersonal.month_wechat_cumulative }}
									</span>
								</cl-filter>
							</el-col>
							<el-col :span="4">
								<cl-filter label="差额：">
									<span class="color-danger">
										{{ trackPersonal.month_wechat_difference }}
									</span>
								</cl-filter>
							</el-col>
							<el-col :span="4">
								<cl-filter label="完成度：">
									<span class="color-primary">
										{{ trackPersonal.month_wechat_completion }}
									</span>
								</cl-filter>
							</el-col>
							<el-col :span="4">
								<cl-filter label="加微率：">
									<span class="color-primary">{{
										trackPersonal.wechat_rate
									}}</span>
								</cl-filter>
							</el-col>
						</el-row>
						<el-row :gutter="20">
							<el-col :span="4">
								<cl-filter label="新客定金数(月)：">
									<span class="color-danger">
										{{ trackPersonal.month_deposit }}
									</span>
								</cl-filter>
							</el-col>
							<el-col :span="4">
								<cl-filter label="累计：">
									<span class="color-primary">
										{{ trackPersonal.month_deposit_cumulative }}
									</span>
								</cl-filter>
							</el-col>
							<el-col :span="4">
								<cl-filter label="差额：">
									<span class="color-danger">
										{{ trackPersonal.month_deposit_difference }}
									</span>
								</cl-filter>
							</el-col>
							<el-col :span="4">
								<cl-filter label="完成度：">
									<span class="color-primary">
										{{ trackPersonal.month_deposit_completion }}
									</span>
								</cl-filter>
							</el-col>
							<el-col :span="4">
								<cl-filter label="定金率：">
									<span class="color-primary">{{
										trackPersonal.deposit_rate
									}}</span>
								</cl-filter>
							</el-col>
						</el-row>
					</temolate>
					<template v-else>
						<p style="color: red">未配置个人目标</p>
					</template>
				</el-card>
			</el-form-item>
			<el-form-item>
				<el-tabs v-model="activeTab" type="card" @tab-click="changeTab">
					<el-tab-pane label="个人" name="person" />
					<el-tab-pane label="部门" name="dept" />
				</el-tabs>
				<el-card shadow="never">
					<cl-data-table
						v-if="activeTab == 'person'"
						key="person"
						:data="trackPersonalList"
						:columns="personcClumns"
						:show-page="false"
						border
					/>
					<cl-data-table
						v-if="activeTab == 'dept'"
						key="dept"
						:data="trackDeptList"
						:columns="deptColumns"
						:show-page="false"
						border
					/>
				</el-card>
			</el-form-item>
		</el-form>
		<cl-dialog
			title="部门明细"
			width="800px"
			:visible.sync="visible"
			:props="{
				appendToBody: true,
				top: '5vh'
			}"
		>
			<cl-data-table
				v-loading="loading"
				:data="deptDetailList"
				:columns="deptDetailColumns"
				:show-page="false"
				border
			/>
			<template #footer>
				<el-button @click="dialogClose">关闭</el-button>
			</template>
		</cl-dialog>
	</cl-drawer>
</template>
<script>
export default {
	name: "day-tack",
	data() {
		const columns = [
			{ type: "index", label: "序号", align: "center", width: 50, fixed: true },
			{ label: "日期", prop: "date", minWidth: 100 },
			{ label: "加微数", prop: "jiawei", minWidth: 100 },
			{ label: "新客定金数", prop: "deposit", minWidth: 100 },
			{ label: "定金率", prop: "deposit_rate", minWidth: 100 }
		];
		return {
			// 日跟踪总目标
			trackGeneral: {},
			// 日跟踪个人目标
			trackPersonal: {},
			// 日跟踪个人目标列表
			trackPersonalList: [],
			// 日跟踪部门目标列表
			trackDeptList: [],
			activeTab: "person",
			// 个人
			personcClumns: columns,
			// 部门
			deptColumns: [
				...columns,
				{
					label: "操作",
					prop: "opt",
					width: 90,
					fixed: "right",
					render: ({ row }) => {
						return <el-button onClick={() => this.openDeptDetail(row)}>明细</el-button>;
					}
				}
			],
			visible: false,
			// 部门明细
			deptDetailColumns: [
				{ label: "姓名", prop: "user_name", minWidth: 100 },
				{ label: "加微数", prop: "wechat", minWidth: 100 },
				{ label: "新客定金数", prop: "new_deposit", minWidth: 100 },
				{ label: "新客定金率", prop: "new_deposit_rate", minWidth: 100 }
			],
			deptDetailList: [],
			loading: false,
			p_id: "",
			flag: false
		};
	},
	methods: {
		open(data = {}) {
			this.$refs.drawer.create();
			this.p_id = data.p_id;
			this.getDaytracelist(data.p_id);
			this.getTargettableData(data.p_id);
		},
		onClose() {
			this.activeTab = "person";
			this.flag = false;
		},
		changeTab(tab, event) {
			if (tab.paneName == "dept" && !this.flag) {
				console.log(12316546854156);
				this.getTargettableData(this.p_id, "dept");
				this.flag = true;
			}
		},
		// 目标数据
		async getDaytracelist(p_id) {
			const data = await this.$service.preSale.daytrackDetail({ p_id });
			this.trackGeneral = data;
			if (data.prerson_plan_has != 0) {
				this.trackPersonal = data.prerson_plan_data;
			}
		},
		async getTargettableData(p_id, type = "") {
			const data = await this.$service.preSale.detailsReport({ p_id, type });
			if (this.activeTab == "person") {
				this.trackPersonalList = data;
			} else {
				this.trackDeptList = data;
			}
		},
		// 打开部门明细
		async openDeptDetail(row) {
			console.log(row);
			this.visible = true;
			this.loading = true;
			const data = await this.$service.preSale
				.targetdaydetail({
					p_id: this.p_id,
					even_date: row.date
				})
				.finally(() => {
					this.loading = false;
				});
			this.deptDetailList = data;
		},
		dialogClose() {
			this.visible = false;
		}
	}
};
</script>
<style lang="scss" scoped>
::v-deep {
	.cl-filter {
		margin: 0;
		&__label {
			color: #606266;
		}
	}
	.el-tabs {
		position: relative;
		bottom: -1px;
		&__header {
			margin-bottom: 0;
		}
		&__item.is-active {
			background: #fff;
		}
	}
	.el-dialog__body {
		max-height: 75vh;
		overflow: auto;
	}
}
</style>
